<style type="text/css">
.word {
	font-size: 12px;
}
</style>

<div id="page-inner">
	<div class="row">
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="newTask"></i>
							</h3>
							<small>新任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-bell fa-5x red"></i>
					</div>

				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getTaskbyDeadline"></i>
							</h3>
							<small>今日到期任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-exclamation-circle fa-5x blue"></i>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getTaskbyState"></i>
							</h3>
							<small>紧急任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-comments fa-5x green"></i>
					</div>

				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getTaskupDeadline"></i>
							</h3>
							<small>超时任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-user fa-5x yellow"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getTaskbyCompletion"></i>
							</h3>
							<small>未完成任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-eye fa-5x red"></i>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getTaskbyWeek"></i>
							</h3>
							<small>一周内完成任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-shopping-cart fa-5x blue"></i>
					</div>

				</div>
			</div>
		</div>

		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getTaskbyReader"></i>
							</h3>
							<small>分阅的任务</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-comments fa-5x green"></i>
					</div>

				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-12 col-xs-12">
			<div class="board">
				<div class="panel panel-primary">
					<div class="number">
						<h3>
							<h3>
								<i id="getVote"></i>
							</h3>
							<small>参与的投票</small>
						</h3>
					</div>
					<div class="icon">
						<i class="fa fa-user fa-5x yellow"></i>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-sm-6 col-xs-12">
			<div class="panel panel-default chartJs">

				<div class="panel-heading">
					<div class="card-title">
						<div class="title">
							任务饱满度统计
							<div id="line-legend">
								<ul style="list-style:none;" class="line-legend" >

									<li style="float:left;" class="checkbox-five"><input type="checkbox"
										name="line-legend" value="0" checked="checked"> <label
										for="line-legend"
										style="background-color: rgba(255, 17, 17, 100);"> </label> <span
										class="word">创建任务数</span></li>
									<li style="float:left;" class="checkbox-five"><input type="checkbox"
										name="line-legend" value="1" checked="checked"> <label
										for="line-legend"
										style="background-color: rgba(151, 187, 205, 100);"> </label> <span
										class="word">执行任务数</span></li>
									<li style="float:left;" class="checkbox-five"><input type="checkbox"
										name="line-legend" value="2" checked="checked"> <label
										for="line-legend"
										style="background-color: rgba(221, 221, 0, 1);"> </label> <span
										class="word">分阅任务数</span></li>

								</ul>
							</div>
						</div>

					</div>
				</div>
				<div class="panel-body">
					<canvas id="workSpaceLineChart" class="chart"></canvas>
				</div>


			</div>
		</div>

		<div class="col-sm-6 col-xs-12">
			<div class="panel panel-default chartJs">

				<div class="panel-heading">
					<div class="card-title">
						<div class="title">
							本月任务统计
							<div id="pie-legend-pie">
								<ul style="list-style:none;">
								

									<li style="float:left;"><label
										for="line-legend"
										style="margin-bottom: 0px;background-color:rgba(26, 188, 156, 200);width:12px;height:12px;"> </label> <span
										class="word">未完成&nbsp;</span></li>
									<li style="float:left;"><label
										for="line-legend"
										style="margin-bottom: 0px;background-color:  rgba(250, 42, 0, 200);width:12px;height:12px;"> </label> <span
										class="word">未完成（超时）&nbsp;</span></li>
								
									<li style="float:left;" ><label
										for="line-legend"
										style="margin-bottom: 0px;background-color: rgba(250, 190, 40, 200);width:12px;height:12px;"> </label> <span
										class="word">已完成&nbsp;</span></li>
									<li style="float:left;"><label
										for="line-legend"
										style="margin-bottom: 0px;background-color: rgba(148, 159, 177, 200);width:12px;height:12px;"> </label> <span
										class="word">已完成（超时）&nbsp;</span></li>			
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="panel-body">
					<canvas id="workSpacePieChart" class="chart"></canvas>
				</div>
			</div>
		</div>
	</div>

</div>
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Js -->
<script src="assets/Bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- Chart Js -->
<script type="text/javascript" src="assets/js/Chart.min.js"></script>
<script src="assets/js/workSpace.js"></script>
<script>
	$(document).ready(function() {
		loadWorkSpaceNum();
		loadWorkSpaceLineChart();
		loadWorkSpacePieChart();
		//showPieChart();
	});
</script>